import React, { useState, useEffect } from 'react'
import axios from 'axios';
import './index.scss'
// const Recommend = function() {
//     const [count,setCount] =useState(0)
//    useEffect(() => {
//        console.log('执行中');
//        document.title = `You clicked ${count} times`;
//    })
//     return (
//         <div onClick={() =>{
//             setCount(count+1)
//         }} className='recommend'>
//             我是推荐页面{count}
//         </div>
//     )
// }


function MyComponent() {
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [items, setItems] = useState([]);

    // Note: the empty deps array [] means
    // this useEffect will run once
    // similar to componentDidMount()
    useEffect(() => {
        axios.get('https://music.icci.top/banner?type=1').then((res) => {
            console.log(res);
            setIsLoaded(true);
            setItems(res.data.banners);
        }).catch((err) => {
            setIsLoaded(true);
            setError(error);
        })
        // eslint-disable-next-line
    }, [])

    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
        return (
            <ul>
                {items.map((item,index) => (
                    <li key={index}>
                        {item.typeTitle} {item.targetId}
                    </li>
                ))}
            </ul>
        );
    }
}
export default MyComponent